<template>
	<view>
		<scroll-view scroll-x="true">
			<view class="table-list">
				<view class="tr head u-border-bottom">
					<view class="th u-w-240"><text>台账分类</text></view>
					<view class="th u-w-100"><text>类型</text></view>
					<view class="th u-w-120"><text>可回收物</text></view>
					<view class="th u-w-160"><text>回收单价</text></view>
					<view class="th u-w-160"><text>回收量</text></view>
					<view class="th u-w-160"><text>金额</text></view>
					<!-- <view class="th fixed u-text-right"><text>操作</text></view> -->
				</view>
				<view class="body">
					<view 
					v-for="(item,index) in stockDetailsList" :key="index"
					class="tr"
					:class="index == stockDetailsList.length - 1?'last':'u-border-bottom'"
					>
						<view class="td u-w-240">
							<text>{{item.ordertype}}</text>
						</view>
						<view class="td u-w-100">
							<text>{{item.typenames}}</text>
						</view>
						<view class="td u-w-120">
							<text class="">{{item.productname}}</text>
						</view>
						<view class="td u-w-160">
							<text class="">{{item.price}}</text>
						</view>
						<view class="td u-w-160">
							<text class="u-font-bold">{{item.weight}}</text>
							<!-- <text>{{item.isweighing?'KG':'件'}}</text> -->
						</view>
						<view class="td u-w-160">
							<text class="">{{item.amount}}</text>
						</view>
						<!-- <view class="td fixed u-text-right">
							<text class="links u-font-24">查看</text>
						</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="u-p-30">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	
	export default {
		data() {
			return {
				loading: false,
				productId: 0,
				pageIndex: 1,
				pageSize: 20,
				total: 0,
				loadStatus: 'loading',
				stockDetailsList: [], //出入库台账列表
			}
		},
		onLoad(opt) {
			this.productId = opt.id
			this.getStockDetailsList()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId
			})
		},
		onPullDownRefresh() {
			this.stockDetailsList = []
			this.pageIndex = 1
			this.getStockDetailsList().then(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		onReachBottom(e) {
			this.reachBottom()
		},
		methods: {
			reachBottom() {
				// 此tab为空数据
				this.pageIndex += 1
				this.getStockDetailsList().then((row) => {
					if (row.length == 0) {
						
					}
				})
			},
			getStockDetailsList(){ //获取出入库台账列表
				return this.$u.post('/Store/Stock/Ledger', {
					"pageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"productId": this.productId,
					"storeId": this.storeId
				}).then((res) => {
					console.log(res)
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							this.stockDetailsList.push(item)
						})
						if (res.rows.length < this.pageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loading"
						}
					} else {
						this.loadStatus = "nomore"
					}
					this.total = res.total
					return res.rows
					
				}).catch((err) => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.table-list{
		background-color: #fff;
		padding: 0 20rpx;
		width: 1000rpx;
		.tr{
			display: flex;
			align-items: center;
			&.head{
				// position: fixed;
				// left: 0;
				// z-index: 10;
				// background: #fff;
			}
			&:active{
				opacity: 0.6;
			}
			.th{
				// flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				// flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
		.fixed{
			position: fixed;
			right: 0;
			z-index: 9;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, .12);
			padding-right: 20rpx!important;
			width: 100rpx;
		}
	}
	.slot-content{
		padding: 30rpx;
	}
	.tag{
		background-color: $u-color-blue;
		color: #fff;
		border-radius: 4rpx;
	}
	.last{
		border-width: 0;
	}
</style>

